<template>
	<div class="loading-wrap" >
		<li v-for="item in list" :key="item">
			<div class="img"></div>
			<div class="text-box">
				<p class="time"></p>
				<p class="desc"></p>
			</div>
		</li>
	</div>
</template>

<script>
export default {
	data() {
		return {
			list: 3
		}
	}
}
</script>
<style scoped>
.loading-wrap {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	padding: 20px;
	width: 100%;
	box-sizing: border-box;
}
li{
	height: 100px;
	margin-bottom: 20px;
	list-style: none;
	display: flex;
}
.img{
	width: 100px;
	height: 100px;
	background: #ebebeb;
	margin-right: 20px;
}
.text-box{
	flex: 1;
}
p{
	width: 100%;
	height: 20px;
	margin-bottom: 10px;
	background: #ebebeb;
}
.time{
	width: 40%;
	animation: bouncedelay 2s infinite ease-in-out;
}
.desc{
	width: 40%;
	animation: bouncedelay2 1.8s infinite ease-in-out;
}

@keyframes bouncedelay {
  40% {
    width: 70%
  }
}
@keyframes bouncedelay2 {
  40% {
    width: 100%
  }
}
</style>
